<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:shiro="http://shiro.apache.org/tags"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>Actualites</title>
    </h:head>
    <h:body>
        <style type="text/css">
            #status
            {
                border: 1px solid;
                width: 500px
            }

            .comment
            {
                td
                {
                    color:red;
                    background-color: appworkspace;
                }
            }            

            .statusphoto
            {
                width:30px;
                height:30px;
            }
            .commentphoto
            {
                width:15px;
                height:15px;
            }
            .autoresize
            {               
                resize: none;                
            }

            .header
            {
                width:100%;
                height: 50px;
                background-color: #6396bc;
                position:fixed;
                top:0;
                left:0;
                color:white;
            }
        </style>

        <script>
            function textAreaAdjust(o)
            {
                o.style.height = "0px";
                o.style.height = (o.scrollHeight) + "px";
            }
        </script>

        <div class="header">
            <h:form>
                <table style="margin:auto; width:100%; height:50px; vertical-align: middle">
                    <tr>
                        <td style="width:150px; text-align:center">
                            <label style="font-size: xx-large; font-weight: bold">Coucou</label>
                        </td>
                        <td>
                            &nbsp;
                            Find your friends
                            <h:inputText style="height:25px; width:300px">                    
                            </h:inputText>
                            <h:commandButton style="height:30px; width:60px" value="Find"></h:commandButton>
                        </td>
                        
                        <td>
                            <a href="profile.xhtml">#{userController.currentUser.username}</a>
                        </td> 
                        
                        <td>
                            <a href="actualites.xhtml">Home</a>
                        </td>                    
                                           
                        <td>
                            <a href="friend_list.xhtml">Friend List</a>
                        </td> 
                        <td>
                            <h:commandLink action="#{loginController.doLogout()}">Logout</h:commandLink>
                        </td>                    

                    </tr>
                </table>   
            </h:form>
        </div>
        <div style="margin-top:100px;">
            <h:form>
                <table style="margin:auto">
                    <tr>
                        <td>
                            What's on your mind?
                        </td>                    
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:inputTextarea class="autoresize" style="width:500px" onkeyup="textAreaAdjust(this)" value="#{statusController.status.contenu}"></h:inputTextarea>
                        </td>                    
                    </tr>
                    <tr>
                        <td>
                            <h:selectOneMenu value="#{statusController.statusVision}" style="height:25px">
                                <f:selectItems value="#{statusController.statusVisionList}" id="Items"/>
                            </h:selectOneMenu>                         
                        </td>
                        <td style="text-align:right; vertical-align: bottom">
                            <h:commandButton value="Post" style="width:80px; height:25px" action="#{statusController.doCreate()}"/>
                        </td>
                    </tr>
                </table>
            </h:form> 
        </div>

        <br/>
        <br/>        
        <h:dataTable style="margin:auto;" cellspacing="10px" value="#{statusController.statusList}" var="status">
            <h:column>
                <h:form id="form_#{status.IDStatut}">
                    <table id="status" cellspacing="5px">
                        <tr>
                            <td rowspan="2" class="statusphoto">
                                photo
                            </td>
                            <td colspan="2">
                                <h:outputLabel style="font-weight: bold" value="#{status.proprietaire.username}"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <h:outputLabel value="#{status.datePublication}"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-top: 20px; padding-bottom: 20px" colspan="3">
                                <h:outputLabel value="#{status.contenu}"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <h:commandLink action="#{statusController.likeAStatus(status)}" value="Like" rendered="#{!statusController.hasLike(status)}"/>
                                <h:commandLink action="#{statusController.unlikeAStatus(status)}" value="Unlike" rendered="#{statusController.hasLike(status)}"/>
                            </td>                        
                        </tr>
                        <tr>
                            <td colspan="3">
                                <h:outputLabel value="#{status.getLikes()} people like this" rendered="#{!statusController.hasLike(status)}"/>
                                <h:outputLabel value="You and #{status.getLikes()-1} people like this" rendered="#{statusController.hasLike(status) and status.getLikes()>1}"/>
                                <h:outputLabel value="You like this" rendered="#{statusController.hasLike(status) and status.getLikes()==1}"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <h:column>
                                    <h:dataTable var="comment" style="margin:auto; width:100%" value="#{status.listComments}" >
                                        <h:column>
                                            <table class="comment" style="width:100%;  margin:auto">              
                                                <tr>
                                                    <td rowspan="2" class="commentphoto">
                                                        photo here
                                                    </td>
                                                    <td>
                                                        <h:outputLabel style="font-weight: bold" value="#{comment.commenter.username}"></h:outputLabel>
                                                        <h:outputLabel value=" #{comment.contenu}"></h:outputLabel>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h:outputLabel value="#{comment.datePublication}"></h:outputLabel>
                                                    </td>
                                                </tr>
                                            </table>
                                        </h:column>
                                    </h:dataTable>
                                </h:column>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">                               
                                <h:inputText id="txtComment" value="#{status.newComment.value}" immediate="true" style="width:100%;"></h:inputText>                                                                     
                            </td>
                            <td style="width:30px">
                                <h:commandButton style="width:50px; height: 25px" value="Send" action="#{statusController.addComment(status)}">
                                </h:commandButton>  
                            </td>

                        </tr>
                    </table>
                </h:form>
            </h:column>                
        </h:dataTable>
        <hr/>
    </h:body>
</html>
